<template>
  <el-form
    ref="form"
    :model="form"
    rules="rules"
    inline="true"
    label-width="120px"
  >
    <!-- <div v-if="form.Status!=2" style="padding-left: 20px;padding-top:  10px;text-align:left;">

      <el-button type="primary"  @click="open" icon="el-icon-search">打开项目</el-button>
      <el-button type="primary" @click="confirmData(0)">保存</el-button>
      <el-button type="primary" @click="confirmData(2)">提交</el-button>
    </div> -->

    <el-tabs type="border-card">
      <el-tab-pane label="推荐配置">
        <el-form
          :model="form"
          :inline="true"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="状态" prop="UsageMode">
            <el-radio-group v-model="form.Status" size="small">
              <el-radio
                :label="item.IDXNO"
                name="Status"
                v-for="item in selectlist"
                v-if="item.IDXUP == '02'"
              >
                {{ item.NAME }}
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <br />
          <el-form-item label="开始日期：">
            <el-date-picker
              v-model="form.StartDate"
              placeholder=" 开始日期"
              size="small"
            />
          </el-form-item>
          <el-form-item label="结束日期：">
            <el-date-picker
              v-model="form.EndDate"
              placeholder=" 结束日期"
              size="small"
            />
          </el-form-item>
          <br />

          <!-- <el-form-item label="开放单位：">
              <el-input v-model="form.Organizeid" placeholder=" 开放单位" />
            </el-form-item>
            <br />


                <el-form-item label="职位" prop="UsageMode">
                    <el-radio-group v-model="form.JobName">
                      <el-radio :label="item.IDXNO" name="JobName" v-for="(item) in selectlist" v-if="item.IDXUP=='01'">
                        {{item.NAME}}
                        </el-radio>
                    </el-radio-group>
                  </el-form-item>

           
            <br /> -->
          <el-form-item label="年龄范围：">
            <el-input-number
              v-model="form.Startage"
              placeholder=" 岁"
              size="small"
            />
          </el-form-item>

          <el-form-item label="到：">
            <el-input-number
              v-model="form.Endage"
              placeholder=" 岁"
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="自离期限(天)：">
            <el-input-number
              v-model="form.SelfSeparation"
              placeholder=" 自离期限"
              size="small"
            />
          </el-form-item>

          <el-form-item label="离职期限（天）：">
            <el-input-number
              v-model="form.Qit"
              placeholder=" 离职期限"
              size="small"
            />
          </el-form-item>
          <br />
          <el-form-item label="可推荐次数：">
            <el-input-number
              v-model="form.RecommendedTimes"
              placeholder=" 可推荐次数"
              size="small"
            />
          </el-form-item>
          <el-form-item label="推荐费总金额：">
            <el-input
              v-model="form.Cost"
              placeholder=" 推荐费总金额"
              size="small"
            />
          </el-form-item>
          <br />

          <el-form-item label="推迟发放年龄：">
            <el-input-number
              v-model="form.age"
              placeholder=" 推迟发放年龄"
              size="small"
            />
          </el-form-item>
          <el-form-item label="推迟发放月份：">
            <el-date-picker
              type="month"
              v-model="form.ExtendMonth"
              placeholder=" 推迟发放月份："
              size="small"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="部门">
        <!-- <el-button style="float: right; padding: 3px 0" @click="addRow(1)" type="text">添加</el-button> -->
        <el-button type="primary" icon="el-icon-search" @click="open"
          >添加部门</el-button
        >
        <el-table
          :data="TMDepList"
          :height="tableHeight1"
          style="width: 100%; margin-top: 10px"
          border
          @sort-change="sortChange"
        >
          <el-table-column align="center" label="部门">
            <template slot-scope="scope">
              {{ scope.row.DepName }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delData(scope, 1)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="职位">
        <el-button type="primary" icon="el-icon-search" @click="openJob"
          >添加职位</el-button
        >
        <!-- <el-button style="float: right; padding: 3px 0" @click="addRow(2)" type="text">添加</el-button> -->
        <el-table
          :data="TMJobName"
          :height="tableHeight1"
          style="width: 100%; margin-top: 10px"
          border
          @sort-change="sortChange"
        >
          <el-table-column align="center" label="职位">
            <template slot-scope="scope">
              {{ scope.row.JobCode }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="职位名称">
            <template slot-scope="scope">
              {{ scope.row.JobName }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="级别">
            <template slot-scope="scope">
              {{ scope.row.Rolelevel }}
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delData(scope, 2)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="费用支付返">
        <el-button type="primary" icon="el-icon-search" @click="addRow(3)"
          >添加行</el-button
        >
        <el-table
          :data="formDetail"
          :height="tableHeight1"
          style="width: 100%; margin-top: 10px"
          border
          @sort-change="sortChange"
        >
          <!-- <el-table-column align="center" label="编号">
              <template slot-scope="scope">
                {{ scope.row.RecommendCostNo }}
              </template>
            </el-table-column> -->

          <el-table-column align="center" label="分期">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.Items"
                placeholder="请选择"
                @change="select_status"
              >
                <el-option
                  :label="item.NAME"
                  :value="item.IDXNO"
                  v-for="item in selectlist"
                  v-if="item.IDXUP == '07'"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column align="center" label="费用支付返金额">
            <template slot-scope="scope">
              <el-input
                type="number"
                autosize="true"
                v-model="scope.row.Cost"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delData(scope, 3)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div style="text-align: right">
      <!-- <el-button type="danger" @click="closetab">取消</el-button> -->
      <el-button type="primary" @click="confirmData(0)">保存</el-button>
    </div>

    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="部门资料"
      customClass="customWidth"
      width="60%"
    >
      <el-form :model="name" label-width="80px" label-position="left">
        <v-DepOpen @FunDepAdd="FunDepAdd"></v-DepOpen>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogTableVisible"
      :title="角色"
      customClass="customWidth"
      width="60%"
    >
      <el-form :model="name" label-width="80px" label-position="left">
        <v-RoleOpen @FunRoleAdd="FunRoleAdd"></v-RoleOpen>
      </el-form>
    </el-dialog>
  </el-form>
</template>
<style>
.customWidth {
  width: 80%;
  height: 98%;
}
</style>

<script>
import path from "path";
import { deepClone } from "@/utils";

import { updateForm, DeleteForm, DeleteRow } from "@/api/RecommendCostSetForm";
import elementIcons from "../icons/element-icons";
import vDepOpen from "../Common/DepOpen";
import vAccountOpen from "../Common/AccountOpen";
import vRoleOpen from "../Common/RoleOpen";
export default {
  components: {
    vAccountOpen,
    vDepOpen,
    vRoleOpen,
  },

  props: {
    inputName: String,
    required: true,
  },
  data() {
    return {
      activeName: "first",
      form: [],
      formDetail: [],
      selectlist: [],
      TMDepList: [],
      TMJobName: [],
      multipleTable: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      where: "",
    };
  },
  created: function () {
    this.DataListData();
  },

  methods: {
    async DataListData() {
      // 提交数据，需要修改

      if (this.inputName == null) {
        this.inputName = this.$route.query.billID;
      }

      const result = await updateForm({
        billID: this.inputName,
        IsPostBack: false,
      });

      this.form = result.data1.Table[0];

      this.formDetail = result.data2.Table;
      this.selectlist = result.data3.Table;
      this.TMDepList = result.data4.Table;
      this.TMJobName = result.data5.Table;

      if (result.code === 20000) {
      } else {
        this.$notify({
          title: "error",

          message: result.message,
          type: "error",
        });
      }
    },
    async confirmData(submit) {
      // 提交数据，需要修改

      const Fresult = true;
      if (submit == 2) {
        this.$refs["form"].validate((valid) => {
          if (!valid) {
            this.$notify({
              title: "不能提交",
              dangerouslyUseHTMLString: true,
              message: "不可为空，不能提交",
              type: "error",
            });
            Fresult = false;
            return false;
          }
        });

        //  if ( this.formDetail.PaymentDate == null) {

        //  this.$notify({
        //     title: "不能提交",
        //     dangerouslyUseHTMLString: true,
        //     message: "付款日期不可为空，不能提交",
        //     type: "error"
        //   });
        //   Fresult = false;
        //  }

        //    if ( this.formDetail.PaymentAmount == null) {

        //    this.$notify({
        //       title: "不能提交",
        //       dangerouslyUseHTMLString: true,
        //       message: "付款金额不可为空，不能提交",
        //       type: "error"
        //     });
        //     Fresult = false;
        // }
      }

      if (Fresult) {
        const result = await updateForm({
          RecommendCostSetDate: JSON.stringify(this.form),
          RecommendCostSetDetailDate: JSON.stringify(this.formDetail),
          TMDepListDetailDate: JSON.stringify(this.TMDepList),
          TMJobNameDetailDate: JSON.stringify(this.TMJobName),
          billID: this.form.RecommendCostNo,
          IsPostBack: true,
          submit: submit,
        });

        this.form = result.data1.Table[0];
        this.formDetail = result.data2.Table;
        this.TMDepList = result.data4.Table;
        this.TMJobName = result.data5.Table;

        if (result.code === 20000) {
          //const { description, key, name } = this.EditObj
          this.dialogVisible = false;
          this.$notify({
            title: "保存成功",
            dangerouslyUseHTMLString: true,
            message: "",
            type: "success",
          });
          this.getDataList();
          this.roles = [];
        } else {
          this.$notify({
            title: "保存失败",
            dangerouslyUseHTMLString: true,
            message: "",
            type: "error",
          });
        }
      }
    },
    //editUserInfo(index) {
    //  this.isEditObj[index].a = false;
    //}
    //checkEditUserInfo(index) {      //编辑用户信息
    //  this.isEditObj[index].a = true;
    //},
    //cancelEditUserInfo(index) {
    //  this.isEditObj[index].a = true;
    //}
    select_Cust() {
      this.CustomerRow = this.Customerlist.filter(
        (item) => item.CustomerNo === this.form.CustomerNo
      )[0]; //获取选中行

      this.form.CustomerName = this.CustomerRow.CustomerName; //赋值
    },
    //增加行
    addRow(types) {
      let list = {};
      ;

      if (types == 1) {
        this.TMDepList.push(list);
      } else if (types == 2) {
        this.TMJobName.push(list);
      } else if (types == 3) {
        this.formDetail.push(list);
      }
    },
    goBack() {
      this.$router.go(-1); // 返回
      // 关闭子页面
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex(
          (item) => item.path === this.$route.path
        ),
        1
      );
      this.$router.push(
        this.$store.state.tagsView.visitedViews[
          this.$store.state.tagsView.visitedViews.length - 1
        ].path
      );
    },

    closetab(index) {
      //根据index删除tab组中的tab
      this.$store.dispatch("tagsView/delView", this.$route);
      // 返回上一步路由
      this.$router.go(-1);
    },
    // 删除方法
    // 删除选中行
    delData({ $index, row }, typesID) {
      this.$confirm("确定删除该记录吗?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          if (typesID == 1) {
            this.TMDepList.splice($index, 1);
          } else if (typesID == 2) {
            this.TMJobName.splice($index, 1);
          } else if (typesID == 3) {
            this.formDetail.splice($index, 1);
          }

          if (row.ID == null) {
            return false;
          }

          const result = await DeleteRow({
            ID: row.ID,
            billID: this.inputName,
            types: typesID,
            IsPostBack: false,
          });

          //if (typesID == 1) {
          //  this.GuarantorsList = result.data1.Table;
          //} else if (typesID == 2) {
          //  this.GuarantPerList = result.data1.Table;
          //} else if (typesID == 3) {
          //    this.CollateralDataList = result.data1.Table;
          //}

          this.$message({
            type: "success",
            message: "已删除!",
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },

    select_status(val) {
      this.$forceUpdate();
    },
    open() {
      this.dialogFormVisible = true;
    },
    openJob() {
      this.dialogTableVisible = true;
    },

    FunDepAdd: function (Rows) {
      //添加部门

      for (let v of Rows) {
        this.multipleTable = v;
        let row = {
          DepCode: this.multipleTable.organizeid,
          DepName: this.multipleTable.organizename,
        };

        this.TMDepList.push(row);
      }

      this.dialogFormVisible = false;
    },
    FunRoleAdd: function (Rows) {
      //添加部门

      for (let v of Rows) {
        this.multipleTable = v;
        let row = {
          JobCode: this.multipleTable.RoleCode,
          JobName: this.multipleTable.RoleName,
          Rolelevel: this.multipleTable.Rolelevel,
        };

        this.TMJobName.push(row);
      }

      this.dialogTableVisible = false;
    },
  },
};
</script>


